<script setup lang="ts">
defineOptions({
  name: "distribution"
});

import { ref, inject } from "vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import { getFabDistribute } from "@/api/modules/fab";
import { useRouterStoreHook } from "@/store/modules/router";
import { type SubjectType } from "@/utils/types";

const routerStore = useRouterStoreHook();

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}

const subject = inject("subject", ref<SubjectType>("MACHINE"));

const labelLayoutFn = (ec: any, data: Array<dataType>, title: string) => {
  if (!ec) return null;
  const { getWidth = null } = ec;
  const labelLayout = function (params) {
    if (!getWidth) return null;
    const isLeft = params.labelRect.x < getWidth() / 2;
    const points = params.labelLinePoints;
    points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
    return { labelLinePoints: points };
  };
  const options: CommonEcharts.CommonEchartsOption = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      containLabel: true
    },
    series: [
      {
        name: title,
        type: "pie",
        radius: [0, 45],
        center: ["50%", "50%"],
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n{num|{c}台}{percent| ( {d}% )}",
          minMargin: 2,
          edgeDistance: 10,
          lineHeight: 20,
          rich: {
            num: {
              fontSize: 14,
              color: "#222",
              lineHeight: 20,
              fontWeight: 600
            },
            percent: {
              fontSize: 10,
              color: "#333",
              lineHeight: 20
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
          // lineStyle: {
          //   color: "#ccc"
          // }
        },
        labelLayout,
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  return options;
};

const labelLayoutModuleFn = async (ec: any) => {
  const title = "Module";
  const params = getParams("MODULE");
  const res = await getFabDistribute(params);
  if (!res?.length) return null;
  const data = res.map(item => {
    let { distributeName: name = "", num: value = 0 } = item;
    name = name ? name : "Unknown";
    return { name, value };
  });
  return labelLayoutFn(ec, data, title);
};

const labelLayoutAreaFn = async (ec: any) => {
  const title = "区域";
  const params = getParams("AREA");
  const res = await getFabDistribute(params);
  if (!res?.length) return null;
  const data = res.map(item => {
    let { distributeName: name = "", num: value = 0 } = item;
    name = name ? name : "Unknown";
    return { name, value };
  });
  return labelLayoutFn(ec, data, title);
};

const labelLayoutTypeFn = async (ec: any) => {
  const title = "类型";
  const params = getParams("TYPE");
  const res = await getFabDistribute(params);
  if (!res?.length) return null;
  const data = res.map(item => {
    let { distributeName: name = "", num: value = 0 } = item;
    name = name ? name : "Unknown";
    return { name, value };
  });
  return labelLayoutFn(ec, data, title);
};

const getParams = (selectType: string) => {
  const { activeViceMenu: gasName } = routerStore;
  const className = subject.value;
  if (className === "GAS") {
    return { className, gasName, selectType };
  } else {
    return { className, selectType };
  }
};
</script>

<template>
  <div class="distribution">
    <echartsChart :boxShadow="false" title="机台分布/Module" :labelLayoutFn="labelLayoutModuleFn" />
    <echartsChart :boxShadow="false" title="机台分布/区域" :labelLayoutFn="labelLayoutAreaFn" />
    <echartsChart :boxShadow="false" title="机台分布/类型" :labelLayoutFn="labelLayoutTypeFn" />
  </div>
</template>

<style lang="scss" scoped>
.distribution {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
